<script setup lang="ts">
import { useEcharts } from '@/hooks/useEcharts';
import { Card } from 'ant-design-vue';
import * as echarts from 'echarts';
import { reactive, computed } from 'vue';

const props = withDefaults(defineProps<{
    width?: string,
    height?: string,
    theme?: string,
    bgColor?: string,
    title: string,
    subtitle?: string,
    data: number[], // 曲线数据
    xAxisData: string[], // x轴数据
}>(), {
    width: '100%',
    height: '250px',
    data: () => []
});
const isDarkText = computed(() => {
   return  props.theme === 'dark'?'#000':'#fff'
});
// 柱状图选项
const option = reactive({
  backgroundColor: props.bgColor,
  title: {
    text: props.title,
    subtext: props.subtitle,
    x: 'left',
    textStyle: {
      color: isDarkText
    }
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
        type: 'shadow'
    }
  },
  xAxis: {
    type: 'category',
    data: props.xAxisData,
    axisLabel:{
        color: isDarkText
    }
  },
  yAxis: {
    type: 'value',
    axisLabel:{
        color: isDarkText
    }
  },
  series: [
    {
      data: props.data,
      type: 'bar',
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: '#83bff6' },
          { offset: 0.5, color: '#188df0' },
          { offset: 1, color: '#188df0' }
        ])
      }
    }
  ]
});

const { chartRef } = useEcharts({ props, option });
</script>

<template>
    <Card>
        <div ref="chartRef" :style="{width: props.width, height: props.height}"></div>
    </Card>
</template>

<style scoped>

</style>